<template>
  <div class="y zbl hf">
    <div v-if="buttons" class="x ww wf">
      <el-button
        v-for="i in buttons"
        :key="i.id"
        :class="i.class"
        v-text="i.name"
        @click="$emit('change',i.id)"
        :style="i.style?i.style:''"
        :size="i.Attributes.size"
        :type="i.Attributes.type?i.Attributes.type:'primary'"
        :plain="i.Attributes.plain?true:false"
        :rount="i.Attributes.rount?true:false"
        :circle="i.Attributes.circle?true:false"
        :loading="i.Attributes.loading?true:false"
        :disabled="i.Attributes.disabled?true:false"
        :icon="i.Attributes.icon?i.Attributes.icon:''"
        :autofocus="i.Attributes.autofocus?true:false"
      />
    </div>
    <el-divider />
    <template v-if="CheckBox">
      <div class="x ze" style="padding-right: 30px">
        <el-checkbox
          v-if="CheckBox"
          v-model="checked"
          @change="$emit('change','CheckBox',checked)"
        >{{CheckBox}}</el-checkbox>
      </div>
    </template>
    <template>
      <div class="x za">
        <vue-xlsx-table
          v-if="UpData"
          @on-select-file="$emit(UpData.event,UpData.cmd,$event)"
        >{{UpData.label}}</vue-xlsx-table>
      </div>
    </template>
    <div class="fg1 oa wf">
      <el-tree
        :data="tree"
        :props="{label:'name',children:'children'}"
        default-expand-all
        :expand-on-click-node="false"
        draggable
        highlight-current
        @node-drop="handleDrop"
        @node-click="$emit('change',101,$event)"
        class="tree"
      />
    </div>
  </div>
</template>
<script>
// import name from "./name";
export default {
  // components: { name},
  props: ["buttons", "tree", "CheckBox", "UpData", "download"],
  watch: {},
  data() {
    return {
      checked: false,
      fileList: [],
      json_fields: {
        隶属分类: "pid",
        物料名称: "name", //支持嵌套属性
        物料编号: "uid"
      }
    };
  },
  // computed() {return{}},
  created() {
    // console.log(this.$cp(this.tree));
  },
  methods: {
    handleDrop(a, b) {
      let tmp = false;
      if (b.data.children) tmp = b.data.children.v2item(a.data.id);
      tmp = tmp ? b.data.id : 0;
      this.$emit("change", "tree", a.data.id, tmp);
    }
  }
};
</script>

<style lang="less" scoped>
.tree,
.left {
  background-color: rgb(84, 92, 100);
  color: rgb(11, 179, 245);
}
.el-checkbox {
  color: rgb(11, 179, 245);
  margin: 0px 10px 10px;
}
.tree /deep/ .el-tree-node {
  position: relative;
  // padding-left: 16px;
}
.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #4386c6;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #4386c6;
  height: 20px;
  top: 12px;
  width: 24px;
}
</style>
